<template>
  <div class="">
    <div class="starList">
      <starList
        :starList="starList"
        :currentId="currentId"
        :total="total"
        @handleStarLink="handleStarLink"
        @changeCurrent="changeCurrent"
      ></starList>
    </div>
    <div class="starDetail">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="设备详情">
          <div>
            <div class="left-item" @click="visible = true">
              <img :src="imgSrc" alt="" class="device-img-1" />
            </div>
            <div class="right-item">
              <!-- 红网 -->
              <div>
                <h3 class="star-title">
                  <span class="title-icon">
                    <a-icon type="alert" />
                  </span>
                  <span>底座模块(红网)</span>
                </h3>
                <a-descriptions layout="vertical" :column="6" bordered>
                  <a-descriptions-item
                    :label="transferCn(key)"
                    v-for="(value, key, index) in currentDeviceData.red_dizuo"
                    :key="index"
                  >
                    <span class="suc-text">{{ value }}</span>
                  </a-descriptions-item>
                </a-descriptions>
              </div>
              <div>
                <h3 class="star-title">
                  <span class="title-icon">
                    <a-icon type="alert" />
                  </span>
                  <span>底座模块(蓝网)</span>
                </h3>
                <a-descriptions layout="vertical" :column="6" bordered>
                  <a-descriptions-item
                    :label="transferCn(key)"
                    v-for="(value, key, index) in currentDeviceData.blue_dizuo"
                    :key="index"
                  >
                    <span class="suc-text">{{ value }}</span>
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </div>
          <!-- 安全主机模块 -->
          <div>
            <div>
              <h3 class="star-title">
                <span class="title-icon">
                  <a-icon type="alert" />
                </span>
                <span class="title-content">安全主机模块</span>
                <a-button
                  class="btn"
                  size="small"
                  type="primary"
                  @click="changePowerControl(1, 1)"
                >
                  上电
                </a-button>
                <a-button
                  class="btn"
                  size="small"
                  type="primary"
                  @click="changePowerControl(1, 0)"
                >
                  断电
                </a-button>
                <a-button
                  class="btn"
                  size="small"
                  type="primary"
                  @click="changePowerControl(1, 2)"
                >
                  复位
                </a-button>
              </h3>
              <a-descriptions layout="vertical" :column="5" bordered>
                <a-descriptions-item
                  :label="transferCn(key)"
                  v-for="(value, key, index) in currentDeviceData.main_anquan"
                  :key="index"
                >
                  <span class="suc-text">{{ value }}</span>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
          <!-- 安全主机模块 -->
          <div>
            <h3 class="star-title">
              <span class="title-icon">
                <a-icon type="alert" />
              </span>
              <span class="title-content">安全主机模块</span>
              <a-button
                class="btn"
                size="small"
                type="primary"
                @click="changePowerControl(2, 1)"
              >
                上电
              </a-button>
              <a-button
                class="btn"
                size="small"
                type="primary"
                @click="changePowerControl(2, 0)"
              >
                断电
              </a-button>
              <a-button
                class="btn"
                size="small"
                type="primary"
                @click="changePowerControl(2, 2)"
              >
                复位
              </a-button>
            </h3>
            <a-descriptions layout="vertical" :column="5" bordered>
              <a-descriptions-item
                :label="transferCn(key)"
                v-for="(value, key, index) in currentDeviceData.main_anquan"
                :key="index"
              >
                <span class="suc-text">{{ value }}</span>
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <!-- 大算力主机模块 -->
          <div>
            <h3 class="star-title">
              <span class="title-icon">
                <a-icon type="alert" />
              </span>
              <span>大算力主机模块</span>
            </h3>
            <a-descriptions layout="vertical" :column="6" bordered>
              <a-descriptions-item
                :label="transferCn(key)"
                v-for="(value, key, index) in currentDeviceData.dasuanli"
                :key="index"
              >
                <span class="suc-text">{{ value }}</span>
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <!-- 智能灯光模块 -->
          <div>
            <h3 class="star-title">
              <span class="title-icon">
                <a-icon type="alert" />
              </span>
              <span>智能灯光模块</span>
            </h3>
            <a-descriptions layout="vertical" :column="8" bordered>
              <a-descriptions-item
                :label="transferCn(key)"
                v-for="(value, key, index) in currentDeviceData.dengguang"
                :key="index"
              >
                <span class="suc-text">{{ value }}</span>
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div>
            <ul class="dengguang-box">
              <li>
                <p>灯光编号</p>
                <p>亮灭状态</p>
                <p>电流值</p>
              </li>
              <li :key="index" v-for="(item, index) in dengguang">
                <p>{{ index + 1 }}</p>
                <p><a-switch v-model="item.status" /></p>
                <p>{{ item.dianliu }}A</p>
              </li>
            </ul>
            <div class="denggguang-right">
              <ul class="dengguang-box-2">
                <li>
                  显示类型
                  <a-select v-model="mode" size="small" style="width: 80px">
                    <a-select-option :value="1">
                      箭头
                    </a-select-option>
                    <a-select-option :value="2">
                      三角
                    </a-select-option>
                  </a-select>
                </li>
                <li>
                  显示颜色
                  <a-select size="small" v-model="color" style="width: 80px">
                    <a-select-option :value="1">
                      绿色
                    </a-select-option>
                    <a-select-option :value="2">
                      黄色
                    </a-select-option>
                    <a-select-option :value="3">
                      红色
                    </a-select-option>
                  </a-select>
                </li>
                <li>
                  显示方向
                  <a-select
                    size="small"
                    v-model="direction"
                    style="width: 80px"
                  >
                    <a-select-option :value="1">
                      向左
                    </a-select-option>
                    <a-select-option :value="2">
                      向右
                    </a-select-option>
                    <a-select-option :value="3">
                      禁行
                    </a-select-option>
                    <a-select-option :value="4">
                      关闭
                    </a-select-option>
                  </a-select>
                </li>
                <li>
                  显示距离
                  <a-input
                    size="small"
                    style="width:80px;"
                    v-model.number="distance"
                    suffix="米"
                    placeholder="请输入"
                  />
                </li>
                <li>
                  <a-button
                    type="primary"
                    size="small"
                    @click="changeLightControl"
                  >
                    确定
                  </a-button>
                </li>
              </ul>
            </div>
          </div>
          <!-- 电源板一模块 -->
          <div class="dianyuan-container">
            <h3 class="star-title">
              <span class="title-icon">
                <a-icon type="alert" />
              </span>
              <span>电源板一模块</span>
            </h3>
            <a-descriptions layout="vertical" :column="6" bordered>
              <a-descriptions-item
                :label="transferCn(key)"
                v-for="(value,
                key,
                index) in currentDeviceData.dianyuan_1_status"
                :key="index"
              >
                <span class="suc-text">{{ value }}</span>
              </a-descriptions-item>
            </a-descriptions>
            <table class="dianyuan">
              <tr>
                <td class="title">电源编号</td>
                <td v-for="(item, index) in 7" :key="index">{{ item }}</td>
              </tr>
              <tr>
                <td class="title">电源回检状态</td>
                <td v-for="(item, index) in 7" :key="index">
                  <span class="suc-text">
                    {{
                      currentDeviceData.dianyuan_1_list[`power_${item}_check`]
                    }}
                  </span>
                </td>
              </tr>
              <tr>
                <td class="title">数字量</td>
                <td v-for="(item, index) in 7" :key="index">
                  <span class="suc-text">
                    {{
                      currentDeviceData.dianyuan_1_list[`power_${item}_digital`]
                    }}
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <!-- 电源板二模块 -->
          <div class="dianyuan-container">
            <h3 class="star-title">
              <span class="title-icon">
                <a-icon type="alert" />
              </span>
              <span>电源板二模块</span>
            </h3>
            <a-descriptions layout="vertical" :column="6" bordered>
              <a-descriptions-item
                :label="transferCn(key)"
                v-for="(value,
                key,
                index) in currentDeviceData.dianyuan_2_status"
                :key="index"
              >
                <span class="suc-text">{{ value }}</span>
              </a-descriptions-item>
            </a-descriptions>
            <table class="dianyuan">
              <tr>
                <td class="title">电源编号</td>
                <td v-for="(item, index) in 7" :key="index">{{ item }}</td>
              </tr>
              <tr>
                <td class="title">电源回检状态</td>
                <td v-for="(item, index) in 7" :key="index">
                  <span class="suc-text">
                    {{
                      currentDeviceData.dianyuan_2_list[`power_${item}_check`]
                    }}
                  </span>
                </td>
              </tr>
              <tr>
                <td class="title">数字量</td>
                <td v-for="(item, index) in 7" :key="index">
                  <span class="suc-text">
                    {{
                      currentDeviceData.dianyuan_2_list[`power_${item}_digital`]
                    }}
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <!-- 传感器模块 -->
          <div>
            <h3 class="star-title">
              <span class="title-icon">
                <a-icon type="alert" />
              </span>
              <span>传感器模块</span>
            </h3>
            <a-descriptions layout="vertical" :column="6" bordered>
              <a-descriptions-item
                :label="transferCn(key)"
                v-for="(value, key, index) in currentDeviceData.sensor"
                :key="index"
              >
                <span class="suc-text">{{ value }}</span>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="历史数据" force-render>
          暂无历史数据
        </a-tab-pane>
        <a-tab-pane key="3" tab="网络配置">
          <a-descriptions bordered>
            <a-descriptions-item label="星链设备名称">
              {{ seting.starlinkId }}
            </a-descriptions-item>
            <a-descriptions-item label="IP地址">
              {{ seting.main_ip }}
            </a-descriptions-item>
            <a-descriptions-item label="子网掩码">
              {{ seting.main_port }}
            </a-descriptions-item>
            <a-descriptions-item label="mac地址">
              {{ seting.main_mac }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
      </a-tabs>

      <!-- 星链图像弹框 -->
      <a-modal
        title="实时画面"
        :visible="visible"
        @ok="handleOk"
        width="800px"
        @cancel="handleCancel"
      >
        <div class="device-img"></div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import starList from '../../components/starList/starList.vue';
import {
  getAllStar,
  getStarlinkAllStatus,
  postLightControl,
  postPowerControl,
  getStarlinkScene,
  getStarlinkList,
} from '../../services/user';
export default {
  props: {},
  name: 'starDetail',
  data() {
    return {
      starList: [],
      currentId: 0,
      starlinkId: 0,
      visible: false,
      currentDeviceData: {
        red_dizuo: {
          version: '-',
          status_anquan_1: '-',
          status_anquan_2: '-',
          status_dasuanli: '-',
          status_dengguang: '-',
          status_sensor: '-',
          status_power: '-',
          cpu_utility: '-',
        },
        blue_dizuo: {
          version: '-',
          status_anquan_1: '-',
          status_anquan_2: '-',
          status_dasuanli: '-',
          status_dengguang: '-',
          status_sensor: '-',
          status_power: '-',
          cpu_utility: '-',
        },
        main_anquan: {},
        bei_anquan: {},
        dianyuan_1_status: {
          status: '-',
          current: '-',
          temperture: '-',
          last_update_time: '-',
        },
        dianyuan_1_list: {
          power_1_check: '-',
          power_2_check: '-',
          power_3_check: '-',
          power_4_check: '-',
          power_5_check: '-',
          power_6_check: '-',
          power_7_check: '-',
          power_1_digital: '-',
          power_2_digital: '-',
          power_3_digital: '-',
          power_4_digital: '-',
          power_5_digital: '-',
          power_6_digital: '-',
          power_7_digital: '-',
        },
        dianyuan_2_status: {
          status: '-',
          current: '-',
          temperture: '-',
          last_update_time: '-',
        },
        dianyuan_2_list: {
          power_1_check: '-',
          power_2_check: '-',
          power_3_check: '-',
          power_4_check: '-',
          power_5_check: '-',
          power_6_check: '-',
          power_7_check: '-',
          power_1_digital: '-',
          power_2_digital: '-',
          power_3_digital: '-',
          power_4_digital: '-',
          power_5_digital: '-',
          power_6_digital: '-',
          power_7_digital: '-',
        },
      },
      dengguang: [],
      mode: 1,
      color: 1,
      direction: 1,
      distance: 0,
      imgSrc: '',
      seting: {},
      page: 1,
      total: 0,
    };
  },
  computed: {},
  created() {},
  mounted() {
    if (this.$route.query.plan) {
      this.currentId = parseFloat(this.$route.query.plan);
      this.starlinkId = parseFloat(this.$route.query.plan);
    }
    this.getStarList();
    this.getDetail();
  },
  methods: {
    transferCn(val) {
      let obj = {
        version: '版本',
        status_anquan_1: '通控与安全主机1通信状态',
        status_anquan_2: '通控与安全主机2通信状态',
        status_dasuanli: '通控与大算力主机通信状态',
        status_dengguang: '通控与灯光状态通信状态',
        status_sensor: '通控与传感器状态通信状态',
        cpu_utility: 'cpu使用率',
        delay: '通控与灯光状态通信状态',
        last_update_time: '最近上传时间',
        serial_number: '序列号',
        radar_1_status: '激光雷达1故障',
        radar_2_status: '激光雷达2故障',
        compare_error: '双雷达比较异常',
        posture_error: '位姿检查异常',
        communication_error: '通信异常（安全主机与大算力）',
        signal_platform_software_red_md5: '红网信号平台软件md5',
        signal_platform_software_red_version: '红网信号平台软件版本',
        signal_platform_configure_red_md5: '红网信号平台配置文件md5',
        signal_application_software_red_md5: '红网信号应用软件MD5',
        signal_application_software_red_version: '红网信号应用软件版本',
        signal_application_configure_red_md5: '红网信号应用配置文件md5',
        signal_application_configure_red_version: '红网信号应用配置文件版本',
        signal_platform_configure_red_version: '红网信号平台配置文件版本',
        afr_platform_software_red_md5: '红网埃福瑞平台软件md5',
        afr_platform_software_red_version: '红网埃福瑞平台软件版本',
        afr_platform_configure_red_md5: '红网埃福瑞平台配置文件md5',
        afr_platform_configure_red_version: '红网埃福瑞平台配置文件版',
        afr_application_software_red_md5: '红网埃福瑞应用软件MD5',
        afr_application_software_red_version: '红网埃福瑞应用软件版本',
        afr_application_configure_red_md5: '红网埃福瑞应用配置文件',
        afr_application_configure_red_version: '红网埃福瑞应用配置文件',
        signal_platform_software_blue_md5: '蓝网信号平台软件md5',
        signal_platform_software_blue_version: '蓝网信号平台软件版本', //
        signal_platform_configure_blue_md5: '蓝网信号平台配置文件md5', //
        signal_platform_configure_blue_version: '蓝网信号平台配置文件版本', //
        signal_application_software_blue_md5: '蓝网信号应用软件MD5', //
        signal_application_software_blue_version: '蓝网信号应用软件版本', //
        signal_application_configure_blue_md5: '蓝网信号应用配置文件md5', //
        signal_application_configure_blue_version: '蓝网信号应用配置文件版本', //
        afr_platform_software_blue_md5: '蓝网埃福瑞平台软件md5', //
        afr_platform_software_blue_version: '蓝网埃福瑞平台软件版本', //
        afr_platform_configure_blue_md5: '蓝网埃福瑞平台配置文件md5', //
        afr_platform_configure_blue_version: '蓝网埃福瑞平台配置文件版本', //
        afr_application_software_blue_md5: '蓝网埃福瑞应用软件MD5', //
        afr_application_software_blue_version: '蓝网埃福瑞应用软件版本', //
        afr_application_configure_blue_md5: '蓝网埃福瑞应用配置文件md5', //
        afr_application_configure_blue_version: '蓝网埃福瑞应用配置文件版本', //
        cpu_tem: 'cpu温度', //
        gpu_tem: 'gpu温度', //
        mem_utility: ' 内存使用率', //
        error_code: '故障码', //
        status: '工作状态', //
        light_check: '照明灯光回检', //
        light_1_current: '路灯光电流', //
        light_2_current: '2路灯光电流', //
        light_3_current: '3路灯光电流', //
        light_4_current: '4路灯光电流', //
        light_5_current: '5路灯光电流', //
        light_6_current: '6路灯光电流', //
        light_7_current: '7路灯光电流', //
        voltage: '电源电压', //
        temperture: '温度',
        power_1_check: '1路电源回检', // 1路电源回检
        power_2_check: '2路电源回检', //
        power_3_check: '3路电源回检', //
        power_4_check: '4路电源回检', //
        power_5_check: '5路电源回检', //
        power_6_check: '6路电源回检', //
        power_7_check: '7路电源回检', //
        power_1_digital: '1路数字量', //
        power_2_digital: '2路数字量', //
        power_3_digital: '3路数字量', //
        power_4_digital: '4路数字量', //
        power_5_digital: '5路数字量', //
        power_6_digital: '6路数字量', //
        power_7_digital: '7路数字量', //
        // temperture: null, // 板卡温度
      };
      if (obj[val]) {
        return obj[val];
      } else {
        return val;
      }
    },
    callback(key) {
      console.log(key);
    },
    handleOk() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    getStarImg() {
      getStarlinkScene(this.starlinkId).then((res) => {
        console.log(res);
        this.imgSrc = res.data.url;
      });
    },
    changeLightControl() {
      let arr = [];
      this.dengguang.forEach((item) => {
        if (item.status) {
          arr.push(1);
        } else {
          arr.push(0);
        }
      });
      let obj = {
        requestId: new Date().getTime(),
        starlinkId: this.starlinkId,
        data: [
          {
            operator: this.$store.state.account.userObj.name,
            mode: this.mode,
            color: this.color,
            direction: this.direction,
            distance: this.distance,
            light_ctl: arr,
          },
        ],
      };
      postLightControl(obj).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message.success('发送成功');
        } else {
          this.$message.error('发送失败');
        }
      });
    },
    // 改变电源状态
    changePowerControl(moduleId, cmd) {
      let obj = {
        requestId: new Date().getTime(),
        starlinkId: this.starlinkId,
        data: [
          {
            operator: this.$store.state.account.userObj.name,
            module_id: moduleId,
            cmd: cmd,
          },
        ],
      };
      let _this = this;
      this.$confirm({
        title: '电源控制',
        content: '是否确认当前操作',
        onOk() {
          console.log('OK');
          postPowerControl(obj).then((res) => {
            console.log(res);
            // 操作成功后给提示
            _this.$message.success('操作成功');
          });
        },
        onCancel() {
          console.log('Cancel');
          _this.$message.info('取消操作');
        },
      });
    },
    // 获取设备列表
    getStarList() {
      getAllStar({
        page: this.page,
        pagesize: 20,
      }).then((res) => {
        console.log('星链设备列表', res.data.result);
        this.starList = res.data.result;
        this.total = res.data.total_num;
      });
    },
    // 获取星链详情信息
    getDetail() {
      this.getStarImg();
      getStarlinkAllStatus(this.starlinkId).then((res) => {
        if (res.data.code === 200) {
          this.currentDeviceData.red_dizuo = res.data.result[0][65281];
          this.currentDeviceData.blue_dizuo = res.data.result[0][65282];
          this.currentDeviceData.main_anquan = res.data.result[0][65290];
          this.currentDeviceData.bei_anquan = res.data.result[0][65292];
          this.currentDeviceData.sensor = res.data.result[0][65287];
          this.currentDeviceData.dengguang = res.data.result[0][65286];
          this.currentDeviceData.dasuanli = res.data.result[0][65285];
          if (res.data.result[0][65288]) {
            let {
              status,
              current,
              temperture,
              last_update_time,
              ...params
            } = res.data.result[0][65288];
            this.currentDeviceData.dianyuan_1_status = {
              status,
              current,
              temperture,
              last_update_time,
            };

            this.currentDeviceData.dianyuan_1_list = params;
          }
          if (res.data.result[0][65289]) {
            let {
              status,
              current,
              temperture,
              last_update_time,
              ...params
            } = res.data.result[0][65289];
            this.currentDeviceData.dianyuan_2_status = {
              status,
              current,
              temperture,
              last_update_time,
            };

            this.currentDeviceData.dianyuan_2_list = params;
          }

          // this.currentDeviceData = { ...res.data.result[0] };
          // 获取灯光状态
          this.dengguang = [
            {
              dianliu: res.data.result[0][65286].light_1_current,
              status: true,
            },
            {
              dianliu: res.data.result[0][65286].light_2_current,
              status: false,
            },
            {
              dianliu: res.data.result[0][65286].light_3_current,
              status: false,
            },
            {
              dianliu: res.data.result[0][65286].light_4_current,
              status: false,
            },
            {
              dianliu: res.data.result[0][65286].light_5_current,
              status: false,
            },
            {
              dianliu: res.data.result[0][65286].light_6_current,
              status: false,
            },
            {
              dianliu: res.data.result[0][65286].light_7_current,
              status: true,
            },
          ];
        }
      });
      getStarlinkList(this.starlinkId).then((res) => {
        this.seting = res.data.result;
      });
    },
    handleStarLink(id) {
      this.starlinkId = id;
      this.currentId = id;
      this.getDetail();
    },
    changeCurrent(val) {
      this.page = val;
      this.getStarList();
    },
  },

  components: {
    starList,
  },
};
</script>

<style scoped lang="less">
.device-img-1 {
  display: block;
  width: 100%;
  height: 528px;
}
.left-item {
  width: 30%;
  display: inline-block;
  background: #ddd;
  height: 528px;
  vertical-align: top;
  margin-top: 10px;
}
.right-item {
  width: 70%;
  display: inline-block;
  vertical-align: top;
  padding: 0 20px;
  box-sizing: border-box;
}
.star-title {
  padding-top: 14px;
  .title-content {
    font-size: 16px;
  }
  .btn {
    margin-left: 14px;
    font-size: 12px;
  }

  .title-icon {
    height: 30px;
    width: 30px;
    display: inline-block;
    border-radius: 50%;
    background: #ebf3ff;
    text-align: center;
    line-height: 30px;
    color: #1677ff;
    margin-right: 10px;
    font-size: 14px;
  }
}

.dianyuan-container {
  position: relative;
}
.dianyuan {
  width: 100%;
  margin-top: 20px;
  tr {
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
  }
  td {
    line-height: 34px;
    width: 80px;
    text-align: center;
    border-left: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    padding: 4px 16px;
  }
  td.title {
    width: 100px;
    text-align: left;
    font-weight: bold;
    background: #fafafa;
  }
  .suc-text {
    color: #0091ff;
    font-size: 16px;
  }
  .error-text {
    color: #ff4141;
    font-size: 16px;
  }
}

.star-item,
.star-container {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  padding-left: 42px;
  padding: 0px 30px 6px 30px;
  border-bottom: 1px dashed #ddd;
  li {
    // flex: 1;
    width: 160px;
    p {
      padding: 0;
      margin: 6px 0;
      font-size: 14px;
    }
    .strong-text {
      font-size: 18px;
      font-weight: bold;
    }
    .suc-text {
      font-size: 18px;
      color: #0091ff;
      font-weight: 500;
    }
    .ok-text {
      font-size: 18px;
      color: #44d7b6;
      font-weight: 500;
    }
  }
}
.starList {
  width: 200px;
  background: #fff;
  display: inline-block;
  vertical-align: top;
}
.starDetail {
  width: calc(100% - 216px);
  margin-left: 16px;
  display: inline-block;
  background: #fff;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 40px 20px;
}
.dengguang-box {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  border-left: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
  width: 802px;
  margin-top: 20px;
  li {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    border-right: 1px solid #f0f0f0;
    p {
      height: 50px;
      line-height: 50px;
      padding: 0;
      margin: 0;
      border-bottom: 1px solid #f0f0f0;
      text-align: center;
    }
  }
}
.denggguang-right {
  display: inline-block;
  vertical-align: top;
}
.dengguang-box-2 {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 12px;
  li {
    display: inline-block;
    vertical-align: top;
    width: 150px;
  }
  p {
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    text-align: center;
  }
}
.btn-line {
  text-align: center;
  padding: 30px 0 0;
}
.device-img {
  width: 100%;
  height: 400px;
  background: #2f4a55;
}
</style>
